<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.blurry" clearable placeholder="输入标题搜索" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-date-picker
          v-model="query.createTime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <rrOperation />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="文章标题">
            <el-input v-model="form.title" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="文章封面图片">
            <el-input v-model="form.coverImage" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="isMarkdown">
            <el-input v-model="form.isMarkdown" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="文章内容">
            <el-input v-model="form.content" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="markdown版的文章内容">
            <el-input v-model="form.contentMd" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否置顶">
            <el-input v-model="form.top" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="类型" prop="typeId">
            <el-input v-model="form.typeId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="form.status" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否推荐">
            <el-input v-model="form.recommended" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否原创">
            <el-input v-model="form.original" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="文章简介，最多200字">
            <el-input v-model="form.description" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="文章关键字，优化搜索">
            <el-input v-model="form.keywords" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否开启评论">
            <el-input v-model="form.comment" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="id" />
        <el-table-column prop="title" label="文章标题" />
        <el-table-column ref="table" :show-overflow-tooltip="true" prop="coverImage" label="封面图片">
          <template slot-scope="{row}">
            <el-image
              :src="row.coverImage"
              :preview-src-list="[row.coverImage]"
              fit="contain"
              lazy
              class="el-avatar"
            />
          </template>
        </el-table-column>
        <el-table-column label="是否置顶" align="center" prop="top">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.top"
              :active-value="1"
              :inactive-value="0"
              active-color="#409EFF"
              inactive-color="#F56C6C"
              @change="changeTopStatus(scope.row, scope.row.top)"
            />
          </template>
        </el-table-column>
        <el-table-column label="是否推荐" align="center" prop="recommended">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.recommended"
              :active-value="1"
              :inactive-value="0"
              active-color="#409EFF"
              inactive-color="#F56C6C"
              @change="changeRecommendedStatus(scope.row, scope.row.recommended)"
            />
          </template>
        </el-table-column>
        <el-table-column label="是否开启评论" align="center" prop="comment">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.comment"
              :active-value="1"
              :inactive-value="0"
              active-color="#409EFF"
              inactive-color="#F56C6C"
              @change="changeCommentStatus(scope.row, scope.row.comment)"
            />
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="original" width="90px" label="是否原创">
          <template slot-scope="scope">
            <el-tag :type="scope.row.original ? 'warning' : 'success'">{{ scope.row.original ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lookCount" label="浏览" />
        <el-table-column prop="commentCount" label="评论" />
        <el-table-column prop="loveCount" label="喜欢" />
        <el-table-column prop="createTime" label="添加时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-permission="['admin','bizArticle:edit','bizArticle:del']" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudBizArticle from '@/api/blog/bizArticle'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null, title: null, userId: null, coverImage: null, qrcodePath: null, isMarkdown: null, content: null, contentMd: null, top: null, typeId: null, status: null, recommended: null, original: null, description: null, keywords: null, comment: null, createTime: null, updateTime: null }
export default {
  name: 'BizArticle',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  // 设置数据字典
  dicts: ['top_status'],
  cruds() {
    return CRUD({ title: 'article', url: 'api/bizArticle', sort: 'id,desc', crudMethod: { ...crudBizArticle }})
  },
  data() {
    return {
      currentRow: null,
      permission: {
        add: ['admin', 'bizArticle:add'],
        edit: ['admin', 'bizArticle:edit'],
        del: ['admin', 'bizArticle:del']
      },
      rules: {
        userId: [
          { required: true, message: '用户ID不能为空', trigger: 'blur' }
        ],
        typeId: [
          { required: true, message: '类型不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    // [CRUD.HOOK.beforeRefresh]() {
    //   return true
    // }
    handleCurrentChange(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
    },
    // 改变 置顶状态
    changeTopStatus(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.top_status[val] + '" ' + data.title + ', 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudBizArticle.edit(data).then(res => {
          this.crud.notify(this.dict.label.top_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(err => {
          data.top = !data.top
          console.log(err.response.data.message)
        })
      }).catch(() => {
        data.top = !data.top
      })
    },
    // 改变 推荐 状态
    changeRecommendedStatus(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.top_status[val] + '" ' + data.title + ', 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudBizArticle.edit(data).then(res => {
          this.crud.notify(this.dict.label.top_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(err => {
          data.top = !data.top
          console.log(err.response.data.message)
        })
      }).catch(() => {
        data.top = !data.top
      })
    },
    // 改变  开启评论 状态
    changeCommentStatus(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.top_status[val] + '" ' + data.title + ', 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudBizArticle.edit(data).then(res => {
          this.crud.notify(this.dict.label.top_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(err => {
          data.top = !data.top
          console.log(err.response.data.message)
        })
      }).catch(() => {
        data.top = !data.top
      })
    }
  }
}
</script>

<style scoped>

</style>
